import React,{useState,useEffect } from "react";
import "./common.css"
import {    useNavigate  } from 'react-router-dom'
export function Timeline({ReadArticle,setTitle}){
    const navigate=useNavigate()
    useEffect(()=>{
        setTitle({
            title:'文章归档',
            desc:'继续努力喔',
            actionType:1,
        })
    },[])
    let [data,setData]=useState({
        timeLine:[
            {
                time:'2023年-5月',
                dateList:[{
                    date:'1',
                    title:"SSH公钥登录和RSA非对称加密",
                    toArticle:"test"
                }]
            },
            {
                time:'2023年-4月',
                dateList:[{
                    date:'1',
                    title:"MongoDB常用查询语法及与MySQL对比示例",
                    toArticle:"test"
                }]
            },
            {
                time:'2023年-2月',
                dateList:[{
                    date:'1',
                    title:"自建Git服务器 - 创建属于你自己的代码仓库",
                    toArticle:"test"
                }]
            },
            {
                time:'2023年-1月',
                dateList:[{
                    date:'9',
                    title:"Docker虚拟化管理：30分钟教你学会用Docker",
                    toArticle:"test"
                },{
                    date:'5',
                    title:"Shiro权限管理框架（五）：自定义Filter实现及其问题排查记录",
                    toArticle:"test"
                },{
                    date:'1',
                    title:"感恩2019，你好2020。新年快乐！",
                    toArticle:"test"
                }]
            },
            {
                time:'2022年-12月',
                dateList:[{
                    date:'1',
                    title:"通过Shell脚本以FTP方式上传文件到虚拟主机实现Hexo博客自动发布",
                    toArticle:"test"
                }]
            },
            {
                time:'2023年-11月',
                dateList:[{
                    date:'1',
                    title:"MySQL性能优化：MySQL中的隐式转换造成的索引失效",
                    toArticle:"test"
                }]
            },
            {
                time:'2023年-10月',
                dateList:[{
                    date:'1',
                    title:"记一次事务失效的问题排查记录",
                    toArticle:"test"
                }]
            }
        ]
    })
    function readArticle(id){
        ReadArticle(id,()=>{
            navigate("/articleDetail")
        })
    }
    const colorsList=['#23b7e5','#3a3f51','#27c24c','#111','#fad733','#7266ba','#f05050']
    return (
        <div className="timeLine">
            {
                data.timeLine.map((timeItem,index)=>{
                    return <div className="TimeItem">
                        {/**时间点 */}
                        <div className="dateName" style={{
                            backgroundColor:colorsList[index%7]
                        }}>{timeItem.time}</div>
                        {/**子节点 */}
                        {timeItem.dateList.map(dateItem=>{
                            return <div className="timeArticleInfo"
                                style={{borderLeft:`4px solid ${colorsList[index%7]}`}}
                            >
                                <div className="dateNumber">{dateItem.date}日</div>
                                <div data-color={colorsList[index%7]} className={`dateCircle lineItemColor-${index%7+1}`}></div>
                                <div className={`dateArticle  lineItemColor lineItemColor-${index%7+1}`} onClick={()=>{readArticle(dateItem.toArticle)}}>{dateItem.title}</div>
                            </div>
                        })
                        }
                    </div>
                })
                
            }
            <div className="dateName" style={{
                backgroundColor:colorsList[0]
            }}>开始</div>
        </div>
    )
}